<template>
	<view>
		<view class="item">
		
			<view class="text-line" style="margin-top: 20rpx;">
				<text class="text-name">客户名称:</text>
				<text class="text-value">{{planBean.paymentPlanVO.customerName|filterNull}}</text>
			</view>
		
			<view class="text-line" v-if="1==planBean.paymentPlanVO.rentType||2==planBean.paymentPlanVO.rentType||3==planBean.paymentPlanVO.rentType||4==planBean.paymentPlanVO.rentType||5==planBean.paymentPlanVO.rentType">
				<text class="text-name">付款方式:</text>
				<text class="text-value">{{planBean.paymentPlanVO.paymentMethodStr|filterNull}}</text>
			</view>
		
			<view class="text-line" v-if="1==planBean.paymentPlanVO.rentType||2==planBean.paymentPlanVO.rentType||3==planBean.paymentPlanVO.rentType||4==planBean.paymentPlanVO.rentType||5==planBean.paymentPlanVO.rentType">
				<text class="text-name">租赁开始时间:</text>
				<text class="text-value">{{planBean.paymentPlanVO.timeStartRent|filterNull}}</text>
			</view>
		
			<view class="text-line" v-if="1==planBean.paymentPlanVO.rentType||2==planBean.paymentPlanVO.rentType||3==planBean.paymentPlanVO.rentType||4==planBean.paymentPlanVO.rentType||5==planBean.paymentPlanVO.rentType">
				<text class="text-name">租赁结束时间:</text>
				<text class="text-value">{{planBean.paymentPlanVO.timeFinishRent|filterNull}}</text>
			</view>
		
			<view class="text-line" v-if="1==planBean.paymentPlanVO.rentType||2==planBean.paymentPlanVO.rentType||3==planBean.paymentPlanVO.rentType||4==planBean.paymentPlanVO.rentType||5==planBean.paymentPlanVO.rentType">
				<text class="text-name">付款日:</text>
				<text class="text-value">{{planBean.paymentPlanVO.paymentDay|filterNull}}</text>
			</view>
		
			<view class="text-line">
				<text class="text-name">
					{{2==planBean.paymentPlanVO.rentType?'整备费:'
            :5==planBean.paymentPlanVO.rentType?'首付款/元/台:'
                :1==planBean.paymentPlanVO.rentType||3==planBean.paymentPlanVO.rentType||4==planBean.paymentPlanVO.rentType?'保证金/元/台:'
                    :7==planBean.paymentPlanVO.rentType?'挂靠费:'
                        :'总单价:'}}</text>
				<text class="text-value">￥{{(2==planBean.paymentPlanVO.rentType?planBean.paymentPlanVO.servicingFee:
					5==planBean.paymentPlanVO.rentType?planBean.paymentPlanVO.downPayment:
					1==planBean.paymentPlanVO.rentType||3==planBean.paymentPlanVO.rentType||4==planBean.paymentPlanVO.rentType?planBean.paymentPlanVO.cashDeposit:
              7==planBean.paymentPlanVO.rentType?planBean.paymentPlanVO.monthlyRent:
					planBean.paymentPlanVO.totalPrice)|filterNull}}</text>
			</view>
		
			<view class="text-line" v-if="1==planBean.paymentPlanVO.rentType||2==planBean.paymentPlanVO.rentType||3==planBean.paymentPlanVO.rentType||4==planBean.paymentPlanVO.rentType||5==planBean.paymentPlanVO.rentType">
				<text class="text-name">月租金/元/台:</text>
				<text class="text-value">￥{{planBean.paymentPlanVO.monthlyRent|filterNull}}</text>
			</view>
		
			<view class="text-line" v-if="1==planBean.paymentPlanVO.rentType||2==planBean.paymentPlanVO.rentType||3==planBean.paymentPlanVO.rentType||4==planBean.paymentPlanVO.rentType||5==planBean.paymentPlanVO.rentType">
				<text class="text-name">总期数:</text>
				<text class="text-value">{{planBean.paymentPlanVO.totalPeriods|filterNull}}期</text>
			</view>
		
			<view class="text-line" v-if="1==planBean.paymentPlanVO.rentType||2==planBean.paymentPlanVO.rentType||3==planBean.paymentPlanVO.rentType||4==planBean.paymentPlanVO.rentType||5==planBean.paymentPlanVO.rentType">
				<text class="text-name">剩余期数:</text>
				<text class="text-value">{{planBean.paymentPlanVO.restPeriods|filterNull}}期</text>
			</view>
		
		</view>
		
		<view class="item">
		
			<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
				<u-icon name="order" color="#1573FF" label="付款计划" label-color="#333333"
					:customStyle="{'line-height': '80rpx',}">
				</u-icon>
		
				<text style="line-height: 80rpx; color: #E93131;"></text>
			</view>
		
		
			<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>
			
			<text class="rest-money">应还总金额：¥{{planBean.paymentPlanDetailsVO.receivableTotalAmount}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;已还总金额：¥{{planBean.paymentPlanDetailsVO.receivedTotalAmount}}</text>
			
			<view class="item-content" @click="goDetail(item)" v-for="(item, index) in planBean.paymentPlanDetailsVO.planList" :key="index" v-if="planBean.paymentPlanDetailsVO.planList.length>0">
				<text class="item-text" :style="{'color':item.receivablesId?'#333':'#a7a7a7'}">{{item.collectionTypeStr}}</text>
				<text class="item-text" :style="{'color':item.receivablesId?'#333':'#a7a7a7'}">{{item.receivableDate}}</text>
				<view style="display: inline-flex;align-items: center;">
					<text class="item-text" :style="{'color':item.receivablesId?'#333':'#a7a7a7'}">￥{{item.receivableAmount}}</text>
					<u-icon name="arrow-right" v-if="item.receivablesId"></u-icon>
				</view>
				
			</view>
		
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderCarCode:'',
				planBean:{
					paymentPlanVO:{
						
					},
					paymentPlanDetailsVO:{
						planList:[]
					}
				}
			}
		},
		methods: {
			goDetail(item){
				
				if(!uni.$u.test.isEmpty(item.receivablesId)){
					uni.navigateTo({
						url:'/pagesB/moreinfo/pay-plan-detail?receivablesId='+item.receivablesId
					})
				}
				
			},
		},
		onLoad(op) {
			this.orderCarCode = 'null'!=op.orderCarCode?op.orderCarCode:''
			
			this.$u.api.getPaymentPlan({
				inParameter:this.orderCarCode
			}).then(res=>{
				this.planBean = res
			})
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.rest-money{
		font-size: 24rpx;
		color: #E93131;
		margin: 0 20rpx 10rpx;
	}
	
	.item-content{
		display: flex;
		align-items: center;
		height: 90rpx;
		padding: 0 20rpx;
		justify-content: space-between;
		
		.item-text{
			font-size: 26rpx;
		}
	}
	
	
</style>
